<template>
    <view class="page">
        <view class="Room_box">
            <view class="Room_left_box">
                红包个数
            </view>
            <view class="Room_right_box">
                <u-input type="number" v-model="fieldsValue" placeholder="填写个数" input-align="right" :clearable=false />
            </view>
            <view class="danwei_box">个</view>
        </view>
        <view class="fight_box" @click="luckBtn">拼手气抢钻石福利<u-icon color="#7E7E7E" name="arrow-right"></u-icon></view>
        <view class="Room_box">
            <view class="Room_left_box">
                大王币数量
            </view>
            <view class="Room_right_box">
                <u-input type="number" v-model="quantityValue" placeholder="填写数量" input-align="right" :clearable=false />
            </view>
        </view>
        <view class="fight_box">大王币余额：&ensp;{{ yue }}</view>
        <view class="bottom_box">
            <view class="yue_num_box">
                ￥{{ (fieldsValue * quantityValue).toFixed(2) }}
            </view>
            <view class="packets_box" @click="synthetic">合成代币红包</view>
            <view class="description_box">规则说明</view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            quantityValue: '',//红包个数
            fieldsValue: '',//红包数量
            yue: '',//余额
            obj:{
                img:'https://new.qingfentool.vip/upload/image/20230815/5736d5a6872288fe7bb1a495ab2e8316.jpg'
            },//分享到微信
            Id:'12',//红包id

        }
    },
    onShow() {
        this.getyue()
    },
    methods: {
        // 拼手气抢钻石福利
        luckBtn() {
            uni.navigateTo({
                url: '/packet/benefits'
            })
        },
        getyue() {
            let init = {
                integral: 1
            }
            this.$Request.get(this.$api.user.index, init).then(res => {
                this.yue = res.data.integral
                console.log(this.yue)
            })
        },
        
        synthetic() {
            let data = {
                amount: this.quantityValue,
                num: this.fieldsValue
            }
            this.$Request.post(this.$api.user.packetCreate, data).then(res => {
                this.getyue()
                setTimeout(() => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    }, 1000)
                })
                uni.navigateBack()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: #262626;
    padding-top: 50rpx;

    .Room_box {
        width: 693rpx;
        height: 100rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        padding-right: 24rpx;

        .Room_left_box {
            width: 30%;
            height: 74rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #F8B857;
            line-height: 76rpx;
            padding-left: 24rpx;
        }

        .Room_right_box {
            width: 64%;
            height: 76rpx;
            text-align: right;
            line-height: 76rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #BFBFBF;

            /deep/.u-input {
                width: 100%;
                border: none !important;
                text-align: right !important;
                display: flex !important;
                justify-content: flex-end !important;
                padding-right: 24rpx !important;
            }

            /deep/.u-input__input {
                color: #BFBFBF !important;
                font-size: 30rpx !important;
            }
        }

        .danwei_box {
            height: 76rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #F8B857;
            line-height: 76rpx;
        }
    }

    .fight_box {
        width: 645rpx;
        height: 35rpx;
        font-size: 26rpx;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #F2F2F2;
        line-height: 35rpx;
        margin: auto;
        margin-bottom: 41rpx;

        /deep/.u-icon {
            font-size: 24rpx !important;
            margin-left: 15rpx;
        }
    }

    .bottom_box {
        width: 100%;
        height: 416rpx;
        position: absolute;
        bottom: 20rpx;

        .yue_num_box {
            width: 100%;
            height: 119rpx;
            font-size: 90rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #F8B857;
            line-height: 119rpx;
            text-align: center;
            margin-bottom: 32rpx;
        }
        .packets_box {
            width: 465rpx;
            height: 100rpx;
            background: linear-gradient(135deg, #FFE2B7 0%, #F5B143 100%);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-size: 36rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            line-height: 100rpx;
            text-align: center;
            margin: auto;
            margin-bottom: 57rpx;
        }
        .description_box {
            width: 200rpx;
            height: 35rpx;
            font-size: 26rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #A8A8A8;
            line-height: 35rpx;
            text-align: center;
            margin: auto;
        }
    }
}
</style>